<template id="reactCom_tp">
    <div>

        <div class="reactwrap">
            <div class="tops">
                <div style="margin-left: 30px; line-height: 200px;color: white;">react页面开发流程梳理</div>
                <img src="./assets/img/React.png" width="400" alt="" class="bg">
                <img src="./assets/img/React.png" width="100" alt="">
            </div>
            <div v-for="v in datas">
                <div class="publictitle">
                    {{v.name}}
                </div>
                <div class="publiccontrap">{{v.cont}}</div>
            </div>
        </div>

    </div>
</template>

<script>
    /*export default*/
    window.reactCom_tp = {
        template: '#reactCom_tp',
        data() {
            return {
                datas: [
                    {
                        name: 'react脚手架項目創建的步驟在這個地方就直接省略掉了，從頁面創建開始去進行梳理', cont: `
创建相关的jsx页面文件，安装好相关的react路由依赖，然后配置相关的页面路由入口，这样页面就能通过路由路径去展示出来
//
最新版本的react已经强烈建议使用hook去进行页面开发，新版本相对于旧版本的选项api属性已发生改变
//
那么在页面里面，一个这个作为页面已加载完成的一个卡扣
//
const [load, setLoad] = useState(0)

useEffect(() => {
    if (load != 1) {
        setLoad(() => 1)
        //页面加载完成要走的逻辑
        ...
    }
    return () => {//页面卸载
        ...
    }
}, [])

//

从数据定义开始说起，

const [xxx, setxxx = useState(可以是{},[],'xxx',2212,boolean,undefined,null...)

用上面的形式来进行定义最初始的数据，怎么修改数据？setxxx(要修改的数据参数)或者setxxx((props)=>return 数据)，props拿到的是原本的数据

//

虽然上面是拿到了修改后的数据，但是打印出来却是旧的数据，这时候可以再使用useEffect来进行监听的处理，有多少个就使用多少个进行处理


useEffect(() => {
    if (load == 1) {
        ...//一些要处理的逻辑
    }
}, [xxx/* 这里可以做些更新的监听操作实现shouldComponentUpdate */])

//

可以通过页面实例的props参数去拿到父组件传进来的属性和dom节点，props.xxx是数据获取，props.children是节点获取，要一个个节点去遍历，然后每个节点return出来渲染

//

如果希望全局数据刷新了都可以直接拿到的话，就把全局数据放到缓存存起来

                        `
                    }
                ]
            }
        }
    }
</script>

<style>
    .reactwrap .tops {
        position: relative;
        height: 200px;
        background-color: rgb(82, 134, 154);
        overflow: hidden;
    }

    .reactwrap .tops img {
        position: absolute;
        right: 30px;
        top: 50px
    }

    .reactwrap .tops .bg {
        opacity: .3;
        top: -100px
    }
</style>